.tips{border-width: 1px;border-style: solid;position: absolute;display: none;border-radius: 3px;opacity: 0;filter: alpha( opacity = 0);z-index: 88;padding: 3px;}
.tips p.content{padding: 5px;}
.tips .triangle-front,.tips .triangle-back{width: 0;height: 0;overflow: hidden;border-width: 8px;border-style: solid;position: absolute;border-color: transparent;top: 100%;left: 50%;margin-left: -8px;}
.tips .triangle-back{margin-top: -1px;}

.yellow{border-color: #c7c08d;background-color: #fffac3;}
.yellow .triangle-front{border-top-color: #c7c08d;}
.yellow .triangle-back{border-top-color: #fffac3;}

.black{color: white;border-color: black;background-color: #4B4B4B;}
.black .triangle-front{border-top-color: black;}
.black .triangle-back{border-top-color: #4B4B4B;}

.red{color: white;border-color: red;background-color: #D85F58;}
.red .triangle-front{border-top-color: red;}
.red .triangle-back{border-top-color:#D85F58 ;}